<template>
  <div>
    {{img_height | add_px}}
    <el-carousel indicator-position="outside" :height= "img_height + 'px'" >
      <el-carousel-item v-for="item in dataList" :key="item">
        <img :src="item" @load="img_load" ref='img_ref' />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  name: 'Rotation',
  data () {
    return {
      dataList: ['https://i1.mifile.cn/a4/xmad_15535933141925_ulkYv.jpg',
        'https://i1.mifile.cn/a4/xmad_15532384207972_iJXSx.jpg',
        'https://i1.mifile.cn/a4/xmad_15517939170939_oiXCK.jpg',
        'https://i1.mifile.cn/a4/xmad_15338857534213_DaEjU.jpg',
        'https://i1.mifile.cn/a4/xmad_1535103285321_fPlOK.jpg',
        'https://i1.mifile.cn/a4/xmad_15349329950127_PVrya.jpg',
        'https://i1.mifile.cn/a4/xmad_15338982677936_eQTJk.jpg'],
      img_height: ''
    }
  },
  methods: {
    img_load () {
      console.log(this.$refs.img_ref[0].height, 'img_height')
      this.img_height = this.$refs.img_ref[0].height
      console.log(this.$refs.img_ref[0].width, 'img_width')
    }

  },

  filters: {
    add_px (value) {
      return value + 'px'
    }
  }

}
</script>

<style scoped>
img{
  width: 100%;

}
</style>
